<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="Collection">
        <el-select v-model="col_name" placeholder="请选择" @change="changeMethod">
          <el-option label="book" value="book"></el-option>
          <el-option label="cartoon" value="cartoon"></el-option>
          <el-option label="datum" value="datum"></el-option>
          <el-option label="edu" value="edu"></el-option>
          <el-option label="game" value="game"></el-option>
          <el-option label="music" value="music"></el-option>
          <el-option label="software" value="software"></el-option>
          <el-option label="tv" value="tv"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="list" :default-expand-all="true" height="640" border style="width: 100%;margin-top: 10px;">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column type="expand" width="1500">
        <template slot-scope="{row}">
          <span v-html="JSON.stringify(row, '<br>', 5)"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, jumper" :total="total" :page-size="ps" @current-change="listMethod">
    </el-pagination>
  </div>
</template>
<script>
import apis from "@utils/apis";

export default {
  data() {
    return {
      pn: 1,
      ps: 10,
      total: 0,
      list: [],
      col_name: 'book',
    }
  },

  mounted() {
    this.listMethod()
  },

  methods: {
    initParams() {
      this.pn = 1
      this.ps = 10
    },

    listMethod(page) {
      if (parseInt(page) > 0)
        this.pn = page
      let loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      apis.dbListApi({
        col_name: this.col_name,
        pn: this.pn,
        ps: this.ps,
      }).then(res => {
        loading.close();
        this.list = res.result.docs
        this.total = res.result.total
      }).catch(err => {
        loading.close();
      })
    },

    changeMethod(col_name) {
      this.col_name = col_name
      this.listMethod(1)
    },

  }
}

</script>
<style>
</style>
